<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no,viewport-fit=cover"
    />
    <title>example</title>
    <script src="asset/transform.js"></script>
    <script src="asset/to.js"></script>
    <script src="../build/zingfinger.js"></script>
    <link rel="stylesheet" href="css.css" />
  </head>
  <body>
    <a href="https://github.com/ilgei/ZingFinger" class="ribbon">Fork me on Github</a>
    <div class="header">ZingFinger</div>
    <div class="example">
      <div class="title">singlePinch</div>
      <div class="imgBox">
        <div id="singlePinchImg" class="single">
          <img src="asset/test.png" />
          <div
            class="singlePinchImg-button button"
            id="singlePinchImg-button"
            data-single="true"
          ></div>
        </div>
      </div>

      <div class="title">singleRotate</div>
      <div class="imgBox">
        <div id="singleRotateImg" class="single">
          <img src="asset/test.png" />
          <div
            class="singleRotateImg-button button"
            id="singleRotateImg-button"
            data-single="true"
          ></div>
         
        </div>
        <a href="./rotate.html" class="no-handle">no-handle example</a>
      </div>

      <div class="title">pinch</div>
      <div class="imgBox">
        <img id="pinchImg" src="asset/test.png" />
      </div>
      <div class="title">rotate</div>
      <div class="imgBox">
        <img id="rotateImg" src="asset/test.png" />
      </div>
      <div class="title">pinch+rotate</div>
      <div class="imgBox">
        <img id="pinchRotateImg" src="asset/test.png" />
      </div>
      <div class="title">pressMove</div>
      <div class="imgBox">
        <img id="pressMoveImg" src="asset/test.png" />
      </div>
      <div class="title">doubleTap</div>
      <div class="imgBox">
        <img id="doubleTapImg" src="asset/test.png" />
      </div>
      <div class="title">swipe</div>
      <div class="imgBox pb6">
        <div class="swipeBox">
          <div class="scroll" id="swipeScroll">
            <img src="asset/test.png" /> <img src="asset/test2.png" />
            <img src="asset/test3.png" />
          </div>
          <div class="nuclear-nav">
            <a data-index="0" class="active"></a>
            <a data-index="1" class=" "></a>
            <a data-index="2" class=" "></a>
          </div>
        </div>
      </div>
      <div class="title">longTap</div>
      <div class="imgBox pb6">
        <div class="longTapBox" id="longTapBox">
          <img id="longTapImg" src="asset/test.png" />
          <div class="overlay" id="overlay">
            <img src="asset/yes.png" />
          </div>
        </div>
      </div>

      <div class="title">tap</div>
      <div class="imgBox pb6">
        <div class="longTapBox" id="tapBox">
          <img src="asset/test.png" />
          <div class="overlay2" id="overlay2">
            <img src="asset/yes.png" />
          </div>
        </div>
      </div>
    </div>

    <script src="./example.js"></script>

<!-- <script src=//mat1.gtimg.com/www/js/libs/ppo.console.js charset=utf-8></script>
  <div id=entry style="width:30px;height:30px;position:fixed;top:0;right:0;z-index: 9999;background: #000;"></div>
  <script>ppoConsole.config({
      entry: "#entry"
    });</script> -->
  </body>
</html>
